<script setup lang="ts">
import HeroCarousel from '@/components/HeroCarousel.vue';
import HomeProductCenter from "@/components/HomeProductCenter.vue";
import HomeNewsCenter from "@/components/HomeNewsCenter.vue";
import HomeInjonUS from "@/components/HomeInjonUS.vue";
import {onMounted, ref} from "vue";

// 添加数字动画
const stats = ref([
  { title: '全球用户', value: 0, target: 1000 },
  { title: '专利技术', value: 0, target: 200 },
  { title: '服务国家', value: 0, target: 30 }
])

const animateNumbers = () => {
  stats.value.forEach(stat => {
    const duration = 2000
    const step = (stat.target / duration) * 16
    const timer = setInterval(() => {
      if (stat.value < stat.target) {
        stat.value = Math.ceil(stat.value + step)
      } else {
        clearInterval(timer)
      }
    }, 16)
  })
}

onMounted(() => {
  console.log('HomeView mounted, starting number animation'); // 新增打印语句
  animateNumbers();
})
</script>

<template>
  <div class="home-container">
    <!-- 导航栏已通过NavBar组件全局存在 -->
    <main class="content-section">
      <HeroCarousel />
      <HomeProductCenter />
      <HomeNewsCenter />
      <HomeInjonUS />
    </main>

  </div>
</template>

<style scoped lang="scss">
@use "@/styles/_variables.scss";

.home-container {
  margin-top: 100px; // 与导航栏高度一致
  
  .intro-section {
    padding: 4rem 5%;
    text-align: center;
    background: $sansure-light;
  }

  .highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 3rem 5%;
    
    .highlight-card {
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      
      h3 {
        color: $sansure-blue;
        margin-bottom: 1rem;
      }
    }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 4rem 5%;
  background: white;
  
  .stat-card {
    text-align: center;
    padding: 2rem;
    border-radius: 8px;
    transition: transform 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,51,102,0.1);
    }
    
    .stat-value {
      color: $sansure-blue;
      font-size: 2.8rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }
  }
}

.video-section {
  padding: 4rem 5%;
  background: $sansure-light;
  
  .video-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    
    .corporate-video {
      width: 100%;
      height: 500px;
      object-fit: cover;
    }
  }
}

// 原有样式基础上添加过渡效果
.highlight-card {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,51,102,0.15);
  }
}
</style>